<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/jsmind.css">
  <style>
    #jsmind_container {
      width: 1000px;
      height: 800px;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <input id="file_input_nodearray" class="file_input" type="file"/>
    <!-- 导入：先上传选择文件，在点击打开文件 -->
    <button onclick="open_nodearray()">打开文件</button><br /><br />
    <button onclick="save_nodearray_file()">保存</button>
    <button onclick="screen_shot()">下载导图</button>
    <button onclick="expand_all()">展开全部节点</button>
    <button onclick="expand_to_level(2)">展开到二级节点</button>
    <button onclick="expand_to_level(3)">展开到三级节点</button>
    <button onclick="collapse_all()">隐藏全部节点</button>
    <button id="zoom-in-button" onclick="zoomIn()">放大</button>
    <button id="zoom-out-button" onclick="zoomOut()">缩小</button>
  </div>
  <div id="jsmind_container"></div>

  <script src="./js/jsmind.js"></script>
  <script src="./js/jsmind.menu.js"></script>
  <script src="./js/jsmind.draggable.js"></script>
  <script src="./js/jsmind.screenshot.js"></script>
  <script>
    // 鼠标滚轮监听，放大缩小 zoom in out
    const mind = {
      /* 元数据，定义思维导图的名称、作者、版本等信息 */
      "meta":{
        "name":"example",
        "author":"hizzgdev@163.com",
        "version":"0.2"
      },
      /* 数据格式声明 */
      "format":"node_array",
      /* 数据内容 */
      "data":[
        {"id":"root", "isroot":true, "topic":"jsMind"},
        {"id":"easy", "parentid":"root", "topic":"Easy", "direction":"left"},
        {"id":"easy1", "parentid":"easy", "topic":"Easy to show"},
        {"id":"easy2", "parentid":"easy", "topic":"Easy to edit"},
        {"id":"easy3", "parentid":"easy", "topic":"Easy to store"},
        {"id":"easy4", "parentid":"easy", "topic":"Easy to embed"},
        {"id":"open", "parentid":"root", "topic":"Open Source", "expanded":false, "direction":"right"},
        {"id":"open1", "parentid":"open", "topic":"on GitHub"},
        {"id":"open2", "parentid":"open", "topic":"BSD License"},
        {"id":"powerful", "parentid":"root", "topic":"Powerful", "direction":"right"},
        {"id":"powerful1", "parentid":"powerful", "topic":"Base on Javascript"},
        {"id":"powerful2", "parentid":"powerful", "topic":"Base on HTML5"},
        {"id":"powerful3", "parentid":"powerful", "topic":"Depends on you"}
      ]
    }
    // const options = {
    //   container: 'jsmind_container', // 必选，容器IP
    //   editable: true, // 可选，是否启用编辑
    //   theme: 'default', // 可选，主题
    //   view: {
    //     line_width: 2, // 思维导图线条的粗细
    //     line_color: 'skyblue' // 思维导图线条的颜色
    //   },
    //   mode: 'side', // 显示模式，子节点只分布在根节点右侧
    //   menuOpts:{  // 这里加入一个专门配置menu的对象
    //     showMenu: true, //showMenu 为 true 则打开右键功能 ，反之关闭
    //     injectionList: [
    //       { target: 'edit', text: '编辑节点' },
    //       { target: 'addChild', text: '添加子节点' },
    //       { target: 'addBrother', text: '添加兄弟节点' },
    //       { target: 'delete', text: '删除节点' },
    //       { target: 'showAll', text: '展开全部节点' },
    //       { target: 'hideAll', text: '隐藏全部节点' },
    //       { target: 'screenshot', text: '下载导图' }
    //     ]
    //   }
    // }
    // const jm = new jsMind(options)
    // jm.show(mind)

    let _jm = null
    function open_empty(){
      const options = {
        container: 'jsmind_container', // 必选，容器IP
        editable: true, // 可选，是否启用编辑
        theme: 'default', // 可选，主题
        view: {
          line_width: 2, // 思维导图线条的粗细
          line_color: 'skyblue' // 思维导图线条的颜色
        },
        shortcut: {
          enable: false // 禁用快捷键
        },
        mode: 'side', // 显示模式，子节点只分布在根节点右侧
        menuOpts:{  // 这里加入一个专门配置menu的对象
          showMenu: true, //showMenu 为 true 则打开右键功能 ，反之关闭
          injectionList: [
            { target: 'edit', text: '编辑节点' },
            { target: 'delete', text: '删除节点' },
            { target: 'addChild', text: '添加子节点' },
            { target: 'addBrother', text: '添加兄弟节点' }
          ],
          style: {
            menuItem:{
              'line-height': '28px'
            },
          }
        }
      }
      _jm = jsMind.show(options, mind)
    }

    function open_nodearray(){
        var file_input = document.getElementById('file_input_nodearray');
        var files = file_input.files;
        if(files.length > 0){
            var file_data = files[0];
            jsMind.util.file.read(file_data,function(jsmind_data, jsmind_name){
                var mind = jsMind.util.json.string2json(jsmind_data);
                if(!!mind){
                    _jm.show(mind);
                    reBuild()
                }else{
                    prompt_info('can not open this file as mindmap');
                }
            });
        }else{
            prompt_info('please choose a file first')
        }
    }

    function save_nodearray_file(){
        var mind_data = _jm.get_data('node_array');
        var mind_name = mind_data.meta.name;
        var mind_str = jsMind.util.json.json2string(mind_data);
        jsMind.util.file.save(mind_str,'text/jsmind',mind_name+'.jm');
    }

    function screen_shot(){
      _jm.screenshot.shootDownload();
    }

    function expand_all(){
        _jm.expand_all();
    }

    function collapse_all(){
        _jm.collapse_all();
    }

    function expand_to_level(num){
        _jm.expand_to_depth(num);
    }

    var zoomInButton = document.getElementById("zoom-in-button");
    var zoomOutButton = document.getElementById("zoom-out-button");

    function zoomIn() {
        if (_jm.view.zoomIn()) {
            zoomOutButton.disabled = false;
        } else {
            zoomInButton.disabled = true;
        };
    };


    function zoomOut() {
        if (_jm.view.zoomOut()) {
            zoomInButton.disabled = false;
        } else {
            zoomOutButton.disabled = true;
        };
    };

    function prompt_info(msg){
      alert(msg)
    }

    // 改变窗口大小重置画布
    window.onresize = function () {
      _jm.resize()
    }

    // 鼠标滚轮放大缩小
    function mouseWheel() {
      const scrollFunc = function (e) {
        e = e || window.event
        if (e.wheelDelta) {
          if (e.wheelDelta > 0) {
            zoomIn()
          } else {
            zoomOut()
          }
        } else if (e.detail) {
          if (e.detail > 0) {
            zoomIn()
          } else {
            zoomOut()
          }
        }
      }
      if (document.addEventListener) {
        document.addEventListener('domMouseScroll', scrollFunc, false)
      }
      window.onmousewheel = document.onmousewheel = scrollFunc
    }
    mouseWheel()

    open_empty()
  </script>
</body>
</html>